import React from 'react'

/**
 * this.setState() 修改 state 值
 * 
 * this.setState() 两个作用
 * 
 * ① 修改数据
 * ② 更新视图
 */

export default class App extends React.Component {
  state = {
    name: '百里玄策',
    age: 3
  }

  // 使用 class 实例方式改变 this 指向
  // 这个方式是测试写法，官方还不推荐，但是可以这样写，因为最终 babel 会进行编译
  // 这个方法的原理：还是使用了箭头函数不绑定 this 的特定
  handle = () => {
    this.setState({
      name: '亚瑟',
      age: this.state.age + 1
    })
  }

  render () {
    return (
      <div>
        <p>姓名： { this.state.name }，年龄：  { this.state.age }</p>
        <p>
          <button onClick={ this.handle }>修改state值</button>
        </p>
      </div>
    )
  }
}
